<!-- 横向滚动流动图组件 -->
<template>
	<view class="flow-container">
		<view class="flow-scroll-wrapper">
			<view 
				class="flow-content" 
				:class="{ 'auto-scroll': autoScroll }"
				:style="{ transform: `translateX(${translateX}px)` }"
				@touchstart="onTouchStart"
				@touchmove="onTouchMove"
				@touchend="onTouchEnd"
			>
				<!-- 循环显示项目，确保无缝滚动 -->
				<view 
					class="flow-item" 
					v-for="(item, index) in displayItems" 
					:key="index"
					@tap="onItemClick(index % items.length)"
					:style="itemStyle"
				>
					<image class="flow-image" :src="item.image || item.imageUrl" mode="aspectFill"></image>
					<view class="scroll-year" v-if="item.biao">{{item.biao}}</view>
					<text class="flow-title" v-if="showTitle">{{item.title || item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'flow-gallery',
		props: {
			// 图片数据
			items: {
				type: Array,
				default: () => []
			},
			// 是否显示标题
			showTitle: {
				type: Boolean,
				default: true
			},
			// 是否自动滚动
			autoScroll: {
				type: Boolean,
				default: true
			},
			// 滚动速度
			scrollSpeed: {
				type: Number,
				default: 1
			},
			// 项目宽度
			itemWidth: {
				type: Number,
				default: 200
			},
			// 项目高度
			itemHeight: {
				type: Number,
				default: 200
			},
			// 项目间距
			itemMargin: {
				type: Number,
				default: 20
			}
		},
		data() {
			return {
				translateX: 0,
				isTouching: false,
				startX: 0,
				startTranslateX: 0,
				animationTimer: null,
				itemCount: 20 // 显示足够多的项目确保无缝滚动
			}
		},
		computed: {
			itemStyle() {
				return {
					width: this.itemWidth + 'rpx',
					height: this.itemHeight + 'rpx',
					marginRight: this.itemMargin + 'rpx'
				};
			},
			displayItems() {
				// 生成足够多的项目用于循环显示
				const repeatedItems = [];
				for (let i = 0; i < this.itemCount; i++) {
					repeatedItems.push(...this.items);
				}
				return repeatedItems;
			}
		},
		mounted() {
			if (this.autoScroll) {
				this.startAutoScroll();
			}
		},
		beforeUnmount() {
			this.stopAutoScroll();
		},
		methods: {
			// 开始自动滚动 - 使用CSS transform实现
			startAutoScroll() {
				this.stopAutoScroll();
				
				const animate = () => {
					if (this.isTouching) return;
					
					// 缓慢向左移动
					this.translateX -= 0.5;
					
					// 重置位置实现无限循环
					const itemTotalWidth = (this.itemWidth + this.itemMargin) * this.items.length;
					if (Math.abs(this.translateX) >= itemTotalWidth) {
						this.translateX += itemTotalWidth;
					}
					
					this.$forceUpdate();
					
					if (!this.isTouching) {
						this.animationTimer = requestAnimationFrame(animate);
					}
				};
				
				this.animationTimer = requestAnimationFrame(animate);
			},
			
			// 停止自动滚动
			stopAutoScroll() {
				if (this.animationTimer) {
					cancelAnimationFrame(this.animationTimer);
					this.animationTimer = null;
				}
			},
			
			// 触摸开始事件
			onTouchStart(e) {
				this.isTouching = true;
				this.startX = e.touches[0].clientX;
				this.startTranslateX = this.translateX;
				this.stopAutoScroll();
			},
			
			// 触摸移动事件
			onTouchMove(e) {
				if (!this.isTouching) return;
				
				const currentX = e.touches[0].clientX;
				const deltaX = currentX - this.startX;
				this.translateX = this.startTranslateX + deltaX;
				this.$forceUpdate();
			},
			
			// 触摸结束事件
			onTouchEnd() {
				this.isTouching = false;
				
				// 恢复自动滚动
				if (this.autoScroll) {
					setTimeout(() => {
						this.startAutoScroll();
					}, 300);
				}
			},
			
			// 点击项目事件
			onItemClick(index) {
				this.$emit('item-click', index, this.items[index % this.items.length]);
			}
		}
	}
</script>

<style scoped>
.flow-container {
	width: 100%;
	height: v-bind('itemHeight + 40 + "rpx"');
	overflow: hidden;
	position: relative;
}

.flow-scroll-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.flow-content {
	display: flex;
	padding: 20rpx;
	transition: transform 0.1s linear;
	will-change: transform;
}

.flow-item {
	flex-shrink: 0;
	border-radius: 12rpx;
	overflow: hidden;
	position: relative;
}

.flow-image {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}

.scroll-year {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 18rpx;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(20rpx);
	padding: 8rpx 15rpx;
	transform: scale(0.8);
	transform-origin: right top;
	border-top-right-radius: 20rpx;
	border-bottom-left-radius: 20rpx;
}

.flow-title {
    direction: rtl;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 90%;
	padding: 10rpx;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 20rpx;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
